<template>
    <h1>列表渲染</h1>

    <ol>
        <li v-for="item in info"> {{ item }} </li>
    </ol>

    <ol>
        <li v-for="item in Info"></li>
    </ol>

    <table>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>地址</th>
            </tr>
        </thead>

        <tbody>
            <tr v-for="item in Info">
                <td>{{ item.Id}}</td>
                <td>{{ item.Name}}</td>
                <td>{{ item.Sex}}</td>
                <td>{{ item.Add}}</td>
            </tr>
        </tbody>

    </table>


</template>

<script setup lang="ts">
import {ref} from 'vue';

const info = ref([10,11,12]);

const Info = ref ([
    {
        Id:1,
        Name:'张三',
        Sex:'男',
        Add:'北京',
    },
    {
        Id:2,
        Name:'李四',
        Sex:'女',
        Add:'上海'
    },
    {
        Id:3,
        Name:'王五',
        Sex:'男',
        Add:'浙江'
    },
])

</script>
